<!-- 主页 -->
<template>
    <div class="Parentbox">
        <div class="bovin">
            <el-card>
                <!-- 顶部搜索部分 -->
                <el-tabs>
                    <el-tab-pane>
                        <span slot="label" class="adjustment">
                            <el-button type="primary" plain size="mini" style="color: #000;">货代</el-button>
                        </span>
                        <img src="@/assets/images/subject.png">
                        <div class="subbody">
                            <div class="financing">
                                <div style="height: 30px;"></div>
                                <div>
                                    融资渠道：
                                    <el-tag
                                        style="color: black; width: 71px;  height: 27px; text-align: center; line-height: 27px;   "
                                        color="#91b4fa" size="small ">银行</el-tag>
                                </div>
                                <div class="space">
                                    融资期限：
                                    <el-tag
                                        style="color: black; width: 71px;height: 27px; text-align: center; line-height: 27px;   "
                                        color="#91b4fa" size="small ">银行</el-tag>
                                </div>
                                <div class="space">
                                    担保方式：
                                    <el-tag
                                        style="color: black; width: 71px;height: 27px; text-align: center; line-height: 27px;   "
                                        color="#91b4fa" size="small ">银行</el-tag>
                                </div>
                                <div class="space">
                                    融资额度：
                                    <el-tag
                                        style="color: black; width: 71px;height: 27px; text-align: center; line-height: 27px;   "
                                        color="#91b4fa" size="small ">银行</el-tag>
                                </div>
                                <div class="space">
                                    融资主题：
                                    <el-tag
                                        style="color: black; width: 71px;   height: 27px; text-align: center; line-height: 27px;"
                                        color="#91b4fa" size="small ">银行</el-tag>
                                </div>
                            </div>
                        </div>
                        <div class="forwarding">
                            <div style="height: 15px;"></div>
                            <el-row class="force">
                                <el-card @click.native="Thefirst(item.id)" class="card" v-for=" item in list"
                                    :key="item.id">
                                    <div slot="header">
                                        <div style="font-size: 30px; font-weight: 900;">{{ item.name }}</div>
                                        <span>{{ item.site }}</span>
                                    </div>
                                    <div style="margin-top: 10px;">
                                        {{ item.age }}
                                    </div>
                                    <div>
                                        {{ item.deadline }}
                                    </div>
                                    <div>
                                        {{ item.money }}
                                    </div>
                                </el-card>
                            </el-row>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="消息中心">
                        <span slot="label">
                            <el-button type="primary" plain size="mini" style="color: #000;">理财</el-button>
                        </span>
                        <img src="@/assets/images/subject.png">
                        <div class="forwarding">
                            <div class="subbody">
                                <div class="financing">
                                    <div style="height: 30px;"></div>
                                    <div>
                                        产品类型：
                                        <el-tag
                                            style="color: black; width: 71px;   height: 27px; text-align: center; line-height: 27px;   "
                                            color="#91b4fa" size="small ">不限</el-tag>
                                    </div>
                                    <div class="space">
                                        风险评级：
                                        <el-tag
                                            style="color: black; width: 71px;height: 27px; text-align: center; line-height: 27px;   "
                                            color="#91b4fa" size="small ">不限</el-tag>
                                    </div>
                                    <div class="space">
                                        投资期限：
                                        <el-tag
                                            style="color: black; width: 71px;height: 27px; text-align: center; line-height: 27px;   "
                                            color="#91b4fa" size="small ">不限</el-tag>
                                    </div>
                                    <div class="space">
                                        发售渠道：
                                        <el-tag
                                            style="color: black; width: 71px;height: 27px; text-align: center; line-height: 27px;   "
                                            color="#91b4fa" size="small ">不限</el-tag>
                                    </div>
                                    <div class="spaceone">
                                        币种：
                                        <el-tag
                                            style="color: black; width: 71px;    height: 27px; text-align: center; line-height: 27px;"
                                            color="#91b4fa" size="small ">不限</el-tag>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </el-tab-pane>
                </el-tabs>
                <!-- 切换部分 -->
                <div class="agency">
                    <div style="height: 40px; background-color: #f8f8f8; margin-top: 5px;">
                        <el-row type="flex">
                            <el-col>
                                <el-row type="flex" justify="space-between">
                                    <div></div>
                                    <div style="margin-top: auto; font-size: large; font-weight: 900;">合作机构</div>
                                    <div class="block">
                                        <el-pagination layout="total, prev, pager, next" :total="26" background>
                                        </el-pagination>
                                    </div>
                                </el-row>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="account">
                        <div style="padding: 25px 20px;">
                            <img :src="item.url" v-for="item in img" :key="item.id" style="margin-left: 13px;">
                        </div>
                    </div>
                </div>
                <!-- 合作机构 -->
                <div class="purchase">
                    <div class="mask"></div>
                    <div style="height: 52px;"></div>
                    <el-row type="flex">
                        <el-col>
                            <div class="the">
                                <el-carousel>
                                    <el-carousel-item v-for="item in Marden" :key="item.id">
                                        <el-image style="width: 100%; height: 100%;" :src="item.url"></el-image>
                                    </el-carousel-item>
                                </el-carousel>
                            </div>
                        </el-col>
                        <el-col>
                            <div class="rightside">
                                <div class="head" v-for="item in characters" :key="item.id">
                                    <div class="characters">
                                        {{ item.name }} </div>
                                    <div class="rule"></div>
                                    <div class="excision">
                                        <div style="font-size: 20px; font-weight: 700;">{{ item.age }}</div>
                                        <div class="hue">{{ item.num }}</div>
                                        <div style="font-size: 500; font-weight: none;">...</div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [
                {
                    id: 1,
                    name: "税e贷",
                    site: '中国银行',
                    age: " 参考利率：4.25%",
                    deadline: " 融资期限：0-12个月",
                    money: "融资额度：0-1000万 "
                },
                {
                    id: 2,
                    name: "税e贷",
                    site: '中国银行',
                    age: " 参考利率：4.25%",
                    deadline: " 融资期限：0-12个月",
                    money: "融资额度：0-1000万 "
                },
                {
                    id: 3,
                    name: "税e贷",
                    site: '中国银行',
                    age: " 参考利率：4.25%",
                    deadline: " 融资期限：0-12个月",
                    money: "融资额度：0-1000万 "
                },
                {
                    id: 4,
                    name: "税e贷",
                    site: '中国银行',
                    age: " 参考利率：4.25%",
                    deadline: " 融资期限：0-12个月",
                    money: "融资额度：0-1000万 "
                },
                {
                    id: 5,
                    name: "税e贷",
                    site: '中国银行',
                    age: " 参考利率：4.25%",
                    deadline: " 融资期限：0-12个月",
                    money: "融资额度：0-1000万 "
                },
                {
                    id: 6,
                    name: "税e贷",
                    site: '中国银行',
                    age: " 参考利率：4.25%",
                    deadline: " 融资期限：0-12个月",
                    money: "融资额度：0-1000万 "
                },
                {
                    id: 7,
                    name: "税e贷",
                    site: '中国银行',
                    age: " 参考利率：4.25%",
                    deadline: " 融资期限：0-12个月",
                    money: "融资额度：0-1000万 "
                },
                {
                    id: 8,
                    name: "税e贷",
                    site: '中国银行',
                    age: " 参考利率：4.25%",
                    deadline: " 融资期限：0-12个月",
                    money: "融资额度：0-1000万 "
                },
                {
                    id: 9,
                    name: "税e贷",
                    site: '中国银行',
                    age: " 参考利率：4.25%",
                    deadline: " 融资期限：0-12个月",
                    money: "融资额度：0-1000万 "
                },

            ],
            img: [
                {
                    id: 1,
                    url: require('@/assets/images/bank.png'),
                },
                {
                    id: 2,
                    url: require(`@/assets/images/bank.png`),

                },
                {
                    id: 3,
                    url: require(`@/assets/images/bank.png`)
                },
                {
                    id: 4,
                    url: require(`@/assets/images/bank.png`)
                },
                {
                    id: 5,
                    url: require(`@/assets/images/bank.png`)
                },
                {
                    id: 6,
                    url: require(`@/assets/images/bank.png`)
                },
                {
                    id: 7,
                    url: require(`@/assets/images/bank.png`)
                },
                {
                    id: 8,
                    url: require(`@/assets/images/bank.png`)
                },
                {
                    id: 9,
                    url: require(`@/assets/images/bank.png`)
                },
                {
                    id: 10,
                    url: require(`@/assets/images/bank.png`)
                },
                {
                    id: 11,
                    url: require(`@/assets/images/bank.png`)
                },
                {
                    id: 12,
                    url: require(`@/assets/images/bank.png`)
                },
                {
                    id: 13,
                    url: require(`@/assets/images/bank.png`)
                },
                {
                    id: 14,
                    url: require(`@/assets/images/bank.png`)
                },
                {
                    id: 15,
                    url: require(`@/assets/images/bank.png`)
                },
            ],
            Marden: [
                {
                    id: 1,
                    url: 'https://img2.baidu.com/it/u=532823922,1229126071&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
                    name: "文字是人类用符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。"
                },
                {
                    id: 2,
                    url: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
                },
                {
                    id: 3,
                    url: 'https://img1.baidu.com/it/u=1960110688,1786190632&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281'
                },
                {
                    id: 4,
                    url: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
                }
            ],
            characters: [
                {
                    id: 1,
                    name: "2022-11-09",
                    age: "文字是人类用符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。",
                    num: '文字是人类用符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。',
                },
                {
                    id: 2,
                    name: "2022-11-09",
                    age: "文字是人类用符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。",
                    num: '文字是人类用符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。',
                },
                {
                    id: 3,
                    name: "2022-11-09",
                    age: "文字是人类用符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。",
                    num: '文字是人类用符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。',
                },
                {
                    id: 4,
                    name: "2022-11-09",
                    age: "文字是人类用符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。",
                    num: '文字是人类用符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。',
                },
            ],
            data: []
        }
    },
    created() {
        // console.log("第一行文本\n第二行文本\n第三行文本");
        this.modifydata()
    },
    methods: {
        modifydata() {
            this.data = this.characters.map(item => {
                // console.log(item.name = item.name.slice(0, 5) + '\n' + item.name.slice(5), '修改数据');
                return item.name = item.name.slice(0, 5) + '\n' + item.name.slice(5)
            })
            // console.log(this.data);
            console.log(this.characters);
        },
        Thefirst(id) {
            if (id === 1) {
                this.$router.push(`/commodity/${id}/${123}`)
            }

        }
    }
}
</script>

<style lang="less" scoped>
.Parentbox {
    display: flex;
    justify-content: center;

    .bovin {
        width: 1500px;

        /deep/.el-tabs__nav {
            transform: translateX(70px) translateY(5px) !important;
        }

        /deep/.el-tabs__active-bar {
            height: 0px;
        }

        /deep/.el-tabs__nav-wrap::after {
            width: 0px;
        }

        .subbody {
            width: 100%;
            height: 281px;
            background-color: #f2f2f2;
            margin-top: 20px;

            .financing {
                margin-left: 103px;

                .space {
                    margin-top: 20px;
                }

                .spaceone {
                    margin-top: 20px;
                    margin-left: 32px;
                }
            }

        }
    }

    // 搜索部分
    .forwarding {
        // margin-top: 20px;
        height: 781px;
        background-color: #f8f8f8;

        /deep/.el-card__header {
            border-bottom: 0px;
        }

        .force {
            display: flex;
            flex-wrap: wrap;

            .card {
                width: 341px;
                height: 223px;
                margin-left: 103px;
                margin-bottom: 30px;
            }
        }
    }

    .agency {
        height: 355px;

        .account {
            height: 296px;
            background-color: #f5f6fb;
        }
    }

    .purchase {
        position: relative;
        padding-left: 47px;
        padding-right: 65px;
        height: 529px;
        transition: background-image 1s;

        .mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: all 1s;
            opacity: 0;
            // background-color: #fcfcfc;
            // background-image: linear-gradient(160deg, #fcfcfc 0%, #d0d0d0 100%);
            background-color: #ffffff;
            background-image: linear-gradient(180deg, #ffffff 0%, #d4d4d4 100%);

        }

        .the {
            height: 400px;

            /deep/.el-carousel__container {
                height: 410px;
            }
        }

        /deep/.el-carousel__button {
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }

        .rightside {
            height: 410px;

            .head {
                display: flex;
                margin-left: 120px;
                height: 101px;
                width: 500px;
                margin-top: 10px;
                // background-color: red;

                .characters {
                    display: flex;
                    justify-content: center;
                    // align-items: center;
                    font-size: 22px;
                    font-weight: 600;
                    width: 100px;
                    height: 100%;
                }

                .rule {
                    width: 2px;
                    height: 90px;
                    margin: 0 20px 0 20px;
                    background-color: #e0e0e0
                }

                .excision {
                    white-space: nowrap;
                    overflow: hidden;

                    .hue {
                        margin-top: 20px;
                        font-size: 15px;
                        font-weight: 600;
                        color: #868686;
                        // white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }

            .literary {
                font-size: 25px;
            }

            // .overflow {
            //     // font-size: 25px;
            //     overflow: hidden;
            //     white-space: nowrap;
            //     text-overflow: ellipsis;
            // }
        }

        .translation {
            position: absolute;
            color: red;
        }

        /deep/.el-carousel__indicators {
            transform: translateX(0px) translateY(-40px);
        }
    }

    .purchase:hover .mask {
        opacity: 1;
    }

    /deep/.el-card__body {
        transition: all .5s ease .1s;
    }

    /deep/.el-input-group__append button.el-button {
        width: 80px;
        color: #ffffff;
        border: 1px solid #4d79ff;
        background-color: #4d79ff;
        background-image: linear-gradient(160deg, #4d79ff 0%, #4d94ff 100%);
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }
}

/deep/.el-button {
    width: 90px;
    height: 28px;
    border-radius: 0px;
}

/deep/.el-tabs__header {
    margin-bottom: 1px;
}

/deep/.el-carousel__arrow {
    background-color: #5f80ff;
}
</style>